<template>
<div class="stage">
    <div class="slider" ref="slider">
        <div class="label" :style="{color:infoColor}">{{sliderInfo}}</div>
        <div class="track" :style="{width:yidongx+'px'}"></div>
        <div class="button" ref="button" :style="touch6" 
        @touchstart="touchstart1" @touchmove="touchmove1" @touchend="touchend1" >
            <img :src="handlerImg"    alt="">
        </div>
        <div class="close" @click="close">
          <img :src="closeImg"  alt="">
        </div>
    </div>
</div>


</template>

<script>
import close from "../assets/close.svg";
import right from "../assets/right2.svg";
import rightOK from "../assets/right.svg";
// import $ from 'jquery'

export default {
  data() {
    return {
      flag: 1,
      startx: 0,
      yidongx:0,
      handlerImg: right,
      closeImg:close,
      maxWidth:'',
      oLeft:'',
      infoColor:'#aaa',
      sliderInfo:"拖动滑块验证"
    };
  },
  mounted() {
    // let save_value = 58;
    // this.$emit("validation-finish", save_value);
    // console.log('isMove:',isMove)
  },
  computed: {
    touch6() {
        return {
            left: this.yidongx+'px'
        };
    }
  },

  methods: {
    drag2() {},
    touchstart1(e) {
      if(this.flag==1){
        console.log("touchstart1");
        let touches = e.touches[0];
        this.startx = touches.clientX;
        console.log("47:", this.startx);
      }
    },
    touchmove1(e) {
      if(this.flag==1){
        this.maxWidth = this.$refs.slider.offsetWidth-this.$refs.button.offsetWidth
        let touches = e.touches[0];
        console.log("touchmove1", touches);
        this.oLeft = touches.clientX - this.startx;
        if (this.oLeft < 0) {
          this.yidongx = 0;
        } else if(this.oLeft>= this.maxWidth){
          this.yidongx = this.maxWidth
        }else{
          this.yidongx=this.oLeft;
        } 
      }
        
    },
    touchend1(e) {
      if (this.oLeft >= this.maxWidth) {
        this.yidongx = this.maxWidthl;
        this.handlerImg = rightOK;
        this.infoColor = "#fff";
        this.sliderInfo="验证成功";
        this.flag=0;
        let save_value = 58;
        this.$emit("validation-finish", save_value);
      } else {
        this.yidongx = 0
      }
    },
    close(){
      let closeState = true;
      this.$emit('close-state',closeState);
      window.parent.postMessage({
        'event':'validationCancel',
        'data':{

        }
      },'*')  
    }
  }
};
</script>

<style scoped>
.stage {
  position: relative;
  height: 56px;
}
.slider {
  position: absolute;
  height: 56px;
  box-shadow: 0 0 3px #999;
  background-color: #ddd;
  width: 100%;
}
.label {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, #4d4d4d),
    color-stop(0.4, #4d4d4d),
    color-stop(0.5, white),
    color-stop(0.6, #4d4d4d),
    color-stop(1, #4d4d4d)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 3s infinite;
  -webkit-text-size-adjust: none;
  line-height: 56px;
  height: 56px;
  text-align: center;
  font-size: 16px;
  width: 100%;
  color: #aaa;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
@keyframes slidetounlock {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}
@-webkit-keyframes slidetounlock {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}
.button {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 56px;
  background-color: #fff;
  transition: left 0s;
  -webkit-transition: left 0s;
  display: flex;
  justify-content: center;
  align-items: Center;
  z-index: 2;
}
.button img {
  width: 25px;
  height: auto;
}
.track {
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width 0s;
  -webkit-transition: width 0s;
  background-color: #78c430;
}
.track-on {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width 1s;
  -webkit-transition: width 0.5s;
}
.icon {
  width: 32px;
  height: 32px;
  position: relative;
  top: 10px;
  left: 20px;
  font-family: sans-serif;
}
.icon:before {
  content: ">>";
  color: #ccc;
  line-height: 32px;
}
.spinner {
  width: 32px;
  height: 32px;
  /* background: url('ok.png') no-repeat; */
  position: relative;
  top: 10px;
  left: 10px;
  display: none;
}
.bg-green {
  line-height: 52px;
  height: 52px;
  text-align: center;
  font-size: 16px;
  background-color: #78c430;
}
.close{
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: Center;
  z-index: 1;
}
.close img{
  width: 25px;
  height: auto;
}
</style>
